<template>
	<view class="bg-img">
		<view class="login-box">
			<view class="game-title">
				末日双人成行
			</view>
			<uni-easyinput class="my-input" v-model="usermame" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入游戏昵称" maxlength="6">
			</uni-easyinput>
			<view class="my-btn" @click="goLoad">进入游戏</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usermame:"",
				placeholderStyle: "color:#ffffff;font-size:14px",
				styles: {
					color: '#ffffff',
					borderColor: 'rgba(0, 0, 0, 0.3)'
				}
			}
		},
		methods: {
			goLoad(){
				//去加载页面
				uni.redirectTo({
					url:"/pages/load_page/load_page"
				})
			}
		}
	}
</script>

<style>
.bg-img{
	width: 100%;
	height: 100vh;
	background: url("https://candy-mc.oss-cn-chengdu.aliyuncs.com/login_bg.jpg");
	background-size: 100% 100%;
	overflow: hidden;
}
.login-box{
	width: calc(80% - 20px);
	padding: 15px 10px;
	height: 220px;
	background-color: rgba(0, 0, 0, 0.3);
	margin: 0 auto;
	margin-top: 150px;
	border-radius: 20px;
}
.game-title {
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 40px;
	color: #000; /* 确保文字颜色为白色（或根据背景调整） */
	text-shadow: 
		2px 2px 0px rgba(255, 255, 255, 0.7), /* 白色阴影，轻微偏移 */
		-2px -2px 2px rgba(0, 0, 0, 0.3); /* 可选：增加一点黑色阴影层次感 */
	display: inline-block; /* 确保 transform 对 inline 元素生效 */
}
.my-input{
	margin-top: 20px;
}
.is-focused{
	border-color: #000000 !important;
}
.content-clear-icon{
	color: #ffffff !important;
}


/* 按钮开始 */
.my-btn {
	width: 100%;
	margin-top: 30px;
	
  display: inline-block;
  padding: 15px 0px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff; /* 白色文字 */
  text-align: center;
  text-transform: uppercase; /* 全大写，增加末日感 */
  letter-spacing: 2px; /* 增加文字间距 */
  background-color: rgba(0, 0, 0, 0.7); /* 深黑色背景 */
  border: 2px solid #333333; /* 深灰色边框 */
  border-radius: 5px; /* 轻微圆角 */
  box-shadow: 
    inset 0 -3px 5px rgba(0, 0, 0, 0.5), /* 内阴影增强浮雕感 */
    inset 0 3px 5px rgba(255, 255, 255, 0.1),
    3px 3px 10px rgba(0, 0, 0, 0.8); /* 外阴影模拟环境光 */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}
 
.my-btn:active {
  transform: translateY(2px); /* 点击时下沉效果 */
  box-shadow: 
    inset 0 2px 3px rgba(0, 0, 0, 0.9), 
    inset 0 -2px 3px rgba(255, 255, 255, 0.1),
    1px 1px 5px rgba(0, 0, 0, 0.8);
}
 
/* 可选：添加裂纹或纹理背景增强末日感 */
.my-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 2px);
  background-size: 8px 8px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}

/* 按钮结束 */
</style>